<template>
  <div v-if="getterCurrentQuestion">
    <h4>
      {{ index + 1 }}# {{ getterCurrentQuestion.title }}
      <i
        class="el-icon-question"
        style="margin-left: 5px"
        @click="showTips"
      ></i>
    </h4>
    <el-checkbox-group v-model="userAnswers" style="margin-top: 10px">
      <template
        v-for="(option, index) in JSON.parse(getterCurrentQuestion.options)"
      >
        <el-checkbox :key="index" :label="getLetterBindexyIndex(index)">
          {{ getLetterBindexyIndex(index) }} 、 {{ option.value }}
        </el-checkbox>
        <br :key="'br' + index" />
      </template>
    </el-checkbox-group>
    <el-button-group style="margin-top: 20px">
      <el-button
        type="success"
        icon="el-icon-arrow-left"
        size="small"
        :disabled="index == 0"
        @click="prev"
        >上一页</el-button
      >
      <el-button
        type="success"
        size="small"
        @click="next"
        :disabled="index == randomQuestion.length - 1"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </el-button-group>

    <!-- 抽屉 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <!-- {{getterCurrentQuestion.tips}} -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="答案提示:">
          <el-input
            type="textarea"
            autosize
            placeholder="请输入内容"
            v-model="getterCurrentQuestion.tips"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
import tools from "../../api/audit/tools";
export default {
  data() {
    return {
      userAnswers: [],
      drawer: false,
      form: {},
    };
  },
  fetch() {
    this.randomQuestionDataFn();
  },
  methods: {
    ...mapMutations("test/questions", ["SET_INDEX"]),
    ...mapActions("test/questions", ["randomQuestionDataFn"]),
    // 显示提示
    showTips() {
      this.drawer = true;
    }, 
    //下一页
    next() {
      const userAnswers = this.userAnswers.sort().join("");
      this.getterCurrentQuestion.userAnswers = userAnswers;
      // console.log(this.userAnswers.sort().join(""));
      // console.log(this.getterCurrentQuestion.userAnswers);
      this.SET_INDEX(this.index + 1);
      this.userAnswers = [];
    },
    //上一页
    prev() {
      this.SET_INDEX(this.index - 1);
    },
  },
  computed: {
    ...mapState("test/questions", ["index", "randomQuestion"]),
    ...mapGetters("test/questions", ["getterCurrentQuestion"]),
  },
  mixins: [tools],
};
</script>

<style scoped>
.el-checkbox {
  margin-top: 5px;
}
</style>